<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <title>设备选择集</title>
    <link rel="stylesheet" href="css/demo.css">
    <script src="js/configData.js"></script>


    <!--    -->
    <script src="libs/axios.min.js"></script>
    <script src="libs/httpService.js"></script>
    <script src="js/demo.js"></script>
</head>


<body id="body">
<div id='map'></div>
<div class="opt_panel">


    <button onclick="onStartDraw()">开始框选(默认矩形)</button>
    <button onclick="onEndDraw()">停止框选</button>
    <button onclick="onExport()">导出选中设备PNG</button>
    <br>
    <button onclick="onSetType('point')">点选</button>
    <button onclick="onSetType('circle')">圆形</button>
    <button onclick="onSetType('rectangle')">矩形</button>
    <button onclick="onSetType('polygon')">多边形</button>
    <br>
    <label style="background: #fff">按F12在调试工具的console中查看选择结果</label>
    <br>
    <!--    <button onclick="onSetFillStyle()">更改选择框填充色</button>-->
    <button onclick="onSetSelectTypes()">不选择文本</button>
    <button onclick="onSetSelectedColor()">更改选中的颜色</button>
    <button onclick="onSetIsAddOn()">切换是否追加选择</button>

    <button onclick="onSetLayers()">只查询变压器</button>
</div>
</body>

</html>

<script>
    //示例说明：
    //本示例展示如何在不通的底图之间进行切换（主要是影像图和矢量图切换时有差异）


    //自定义示例参数
    // gridLayerOptions = {
    //     layers:'300000'
    // }
    mapOptions = {
        zoom: 23,
        center: {lng: 107.97619381466961, lat: 34.28378301402492}
    }
    selectToolOptions = {
        // layers:['300000'],
        // filterLayers:['300000']
        // selectTypes: ['point']
    }

    //示例功能代码
    //是否追加选择（连续选择）
    var isAddOn = false

    function onSetIsAddOn(val) {
        isAddOn = !isAddOn
        selectTool.setIsAddOn(isAddOn)
    }

    function onSetSelectTypes() {
        selectTool.setSelectTypes(['point', 'line', 'fill'])
    }

    function onSetSelectedColor() {
        let color = 'rgba(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',1)'
        selectTool.setSelectedColor(color, true)
    }

    function onSetType(val) {
        selectTool.setDrawType(val)
        onStartDraw()
    }

    //开启框选工具
    function onStartDraw() {
        //框选工具开启后的操作方式为：1.点击地图确定第一个点，2.移动鼠标改变矩形大小,3.点击鼠标确定第二个点
        selectTool.enable()
        // map && map.egis.selectionSet.setFlicker(true)
    }

    //关闭框选工具
    function onEndDraw() {
        selectTool.disable(true)
    }

    function onExport() {
        map.egis.selectionSet.exportImage(true)
    }

    var setlayerFlag = false

    function onSetLayers() {
        if (setlayerFlag) {
            selectTool.setLayers()
        } else {
            selectTool.setLayers(['301000'])
        }
        setlayerFlag = !setlayerFlag

    }

    let colors = ['#ff0000', '#00ff00', '#0000ff', '#ff00ff', '#ffff00']
    let index = 0

    function initPage() {
        initSelectTool()

        map.egis.selectionSet.setAutoFlicker(false)
        map.egis.selectionSet.setFlicker(false)
        map.egis.selectionSet.setFillOpacity(0)
        mapServiceUrl = msServiceUrl + '/mapservice/mapexport/vecformat'
        initGridLayer()

        //如果需要可以自行增加追加选择的快捷键 --- 增加一个快捷键控制功能，按住a进行追加选择，松开a恢复到单选模式
        // window.onkeydown = function(e){
        //     console.log(e)
        //     if(e.keyCode == 65){
        //         selectTool.setIsAddOn(true)
        //     }
        // }
        //
        // window.onkeyup = function(e){
        //     console.log(e)
        //     if(e.keyCode == 65){
        //         selectTool.setIsAddOn(false)
        //     }
        // }
    }

    window.onload = function () {
        loadGeoMap_ms(initPage)
    }

</script>
